<template>
	<view class="order-confirmation">
		<view class="success-icon">✓</view>
		<view class="title">订单提交成功</view>
		<view class="order-id">订单号: {{orderId}}</view>
		
		<view class="message">
			<text>您的订单已保存！</text>
			<text>烦请您主动与我们的销售人员联系，以便尽快为您提供样品</text>
		</view>
		
		<view class="order-summary">
			<view class="summary-title">订单摘要</view>
			<view class="summary-item" v-for="(item, index) in orderItems" :key="index">
				<image :src="item.product.preview_image_url || '/static/empty-image.png'" class="item-image"></image>
				<view class="item-info">
					<text class="item-name">{{item.product.name}}</text>
					<text class="item-code">{{item.skuCode}}</text>
					<text class="item-price">¥{{item.salePrice || item.price}}</text>
				</view>
			</view>
		</view>
		
		<view class="total">
			<text>总计：</text>
			<text class="total-price">¥{{totalPrice}}</text>
		</view>
		
		<view class="remarks" v-if="orderRemarks">
			<view class="remarks-title">订单备注</view>
			<view class="remarks-content">{{orderRemarks}}</view>
		</view>
		
		<view class="action-buttons">
			<button class="btn-outline" @tap="returnToList">继续选购</button>
		</view>
	</view>
</template>

<script>
	import { orderApi } from '../../api/index.js';
	import auth from '../../utils/auth.js';
	export default {
		data() {
			return {
				orderId: '',
				orderItems: [],
				orderRemarks: '',
				totalPrice: 0.00
			}
		},
		onShow() {
			auth.checkLogin();
		},
		onLoad(options) {
			auth.checkLogin();
			// 获取订单ID
			if (options.orderId) {
				this.orderId = options.orderId;
				this.getOrderDetails(options.orderId);
			} else {
				uni.showToast({
					title: '订单信息不存在',
					icon: 'none',
					success: () => {
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				});
			}
		},
		methods: {
			// 获取订单详情
			async getOrderDetails(orderId) {
				uni.showLoading({ title: '加载中...' });
				
				try {
					// 调用订单详情API
					const result = await orderApi.getOrderDetail(orderId);
					
					if (result && result.data) {
						const orderData = result.data;
						
						// 设置订单商品
						this.orderItems = orderData.items || [];
						this.orderRemarks = orderData.remarks || '';
						
						// 计算总价
						this.totalPrice = this.orderItems.reduce((total, item) => {
							return total + (item.salePrice || item.price || 0);
						}, 0).toFixed(2);
					} else {
						// 测试数据（仅开发时使用）
						this.orderItems = [
							{
								product: {
									name: '淡水珍珠手链',
									preview_image_url: '/static/product-1.png'
								},
								skuCode: 'SKU-001',
								salePrice: 1200.00
							},
							{
								product: {
									name: '金色海水珍珠项链',
									preview_image_url: '/static/product-2.png'
								},
								skuCode: 'SKU-002',
								salePrice: 3500.00
							}
						];
						
						this.orderRemarks = '请在下午4点前送达，需要红色包装。';
						
						// 计算总价
						this.totalPrice = this.orderItems.reduce((total, item) => {
							return total + (item.salePrice || item.price || 0);
						}, 0).toFixed(2);
					}
					
					uni.hideLoading();
				} catch (error) {
					console.error('获取订单详情失败', error);
					uni.hideLoading();
					
					// 测试数据（仅开发时使用，确保UI能正常显示）
					this.orderItems = [
						{
							product: {
								name: '淡水珍珠手链',
								preview_image_url: '/static/product-1.png'
							},
							skuCode: 'SKU-001',
							salePrice: 1200.00
						}
					];
					this.totalPrice = "1200.00";
					
					uni.showToast({
						title: '获取订单详情失败',
						icon: 'none'
					});
				}
			},
			
			// 返回商品列表
			returnToList() {
				uni.switchTab({
					url: '/pages/list/list'
				});
			},
			
			// 返回首页
			goToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
	.order-confirmation {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.success-icon {
		width: 120rpx;
		height: 120rpx;
		background-color: #F3B250;
		color: #fff;
		font-size: 70rpx;
		line-height: 120rpx;
		text-align: center;
		border-radius: 60rpx;
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 40rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.order-id {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 40rpx;
	}
	
	.message {
		width: 90%;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		text-align: center;
		margin-bottom: 40rpx;
		box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
	}
	
	.message text {
		display: block;
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}
	
	.order-summary {
		width: 90%;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
	}
	
	.summary-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		padding-bottom: 20rpx;
	}
	
	.summary-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px dashed #eee;
	}
	
	.item-image {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		border: 1px solid #eee;
	}
	
	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.item-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.item-code {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.item-price {
		font-size: 32rpx;
		color: #F3B250;
		font-weight: bold;
	}
	
	.total {
		width: 90%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 30rpx;
	}
	
	.total-price {
		font-size: 36rpx;
		color: #F3B250;
		font-weight: bold;
		margin-left: 10rpx;
	}
	
	.remarks {
		width: 90%;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
	}
	
	.remarks-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.remarks-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
	
	.action-buttons {
		width: 90%;
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}
	
	.btn-outline {
		height: 90rpx;
		line-height: 90rpx;
		border: 1.5px solid #dcc8a5;
		border-radius: 0;
		color: #ffffff;
		font-size: 28rpx;
		text-align: center;
		background-color: #282828;
		width: 250rpx;
		margin: 0 10rpx;
		font-weight: inherit;
		font-family: inherit;
		transition: transform 0.2s ease;
	}
	
	.btn-outline:active {
		transform: scale(0.96);
		background-color: rgba(220, 200, 165, 0.1);
	}
</style> 